/* 基础变量 */
$primary-color: #4F46E5;
$secondary-color: #818CF8;
$success-color: #10B981;
$danger-color: #EF4444;
$neutral-100: #F3F4F6;
$neutral-200: #E5E7EB;
$neutral-300: #D1D5DB;
$neutral-700: #374151;
$neutral-800: #1F2937;
$neutral-900: #111827;

.login-container {
  width: 100%;
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 20px;
  position: relative;
  overflow: hidden;

  .bg-decoration {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, $primary-color 0%, $secondary-color 100%);
    clip-path: polygon(0 0, 100% 0, 100% 30%, 0 50%);
    z-index: -1;

    &::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: rgba(255, 255, 255, 0.05);
      clip-path: polygon(0 0, 100% 0, 100% 15%, 0 30%);
    }
  }
}

.login-card {
  width: 100%;
  max-width: 400px;
  background-color: white;
  border-radius: 20px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
  overflow: hidden;
  transform: translateY(0);
  transition: all 0.3s ease;

  &:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.15);
  }

  .card-header {
    padding: 40px 20px 20px;
    text-align: center;
    background: linear-gradient(135deg, $primary-color 0%, $secondary-color 100%);
    color: white;
    position: relative;

    &::before {
      content: '';
      position: absolute;
      bottom: 0;
      left: 0;
      width: 100%;
      height: 20px;
      background: white;
      border-radius: 50% 50% 0 0 / 100% 100% 0 0;
    }

    .logo-container {
      width: 100px;
      height: 100px;
      margin: 0 auto 20px;
      border-radius: 50%;
      background-color: white;
      display: flex;
      justify-content: center;
      align-items: center;
      box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
      transform: scale(1);
      transition: all 0.3s ease;

      &:hover {
        transform: scale(1.05);
      }
    }

    .profile-picture {
      width: 90px;
      height: 90px;
      border-radius: 50%;
      object-fit: cover;
      border: 2px solid white;
      transition: all 0.3s ease;

      &:hover {
        transform: scale(1.1);
        box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.3);
      }
    }

    .welcome-text {
      font-size: 20px;
      font-weight: 600;
      margin-top: 10px;
      text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
    }
  }

  .card-body {
    padding: 30px 25px;

    .input-group {
      position: relative;
      margin-bottom: 20px;

      .input-icon {
        position: absolute;
        left: 12px;
        top: 50%;
        transform: translateY(-50%);
        color: $neutral-300;
        font-size: 16px;
        transition: color 0.3s ease;
      }

      .custom-input {
        width: 85%;
        height: 48px;
        padding: 0 15px 0 40px;
        border-radius: 10px;
        border: 1px solid $neutral-200;
        background-color: $neutral-100;
        font-size: 14px;
        color: $neutral-800;
        transition: all 0.3s ease;

        &:focus {
          outline: none;
          border-color: $primary-color;
          background-color: white;
          box-shadow: 0 0 0 3px rgba($primary-color, 0.2);
        }

        &::placeholder {
          color: $neutral-300;
        }

        &.focused {
          border-color: $primary-color;
          background-color: white;
        }
      }

      .password-toggle {
        position: absolute;
        right: 12px;
        top: 50%;
        transform: translateY(-50%);
        color: $neutral-300;
        font-size: 16px;
        cursor: pointer;
        transition: color 0.3s ease;

        &:hover {
          color: $primary-color;
        }
      }

      // 当输入框聚焦时改变图标颜色
      .focused + .input-icon {
        color: $primary-color;
      }
    }

    .remember-me {
      display: flex;
      align-items: center;
      margin: 15px 0 25px;
      color: $neutral-700;
      font-size: 14px;

      .checkbox-custom {
        margin-right: 8px;
        transform: scale(0.9);

        // 自定义复选框样式
        .wx-checkbox-input {
          width: 18px;
          height: 18px;
          border-radius: 4px;
          border-color: $neutral-300;
          background-color: white;

          &.wx-checkbox-input-checked {
            background-color: $primary-color;
            border-color: $primary-color;
          }

          &.wx-checkbox-input-checked::before {
            width: 10px;
            height: 10px;
            line-height: 10px;
            font-size: 12px;
            color: white;
          }
        }
      }
    }

    .login-button {
      width: 100%;
      height: 48px;
      border-radius: 10px;
      background: linear-gradient(135deg, $primary-color 0%, $secondary-color 100%);
      color: white;
      font-size: 16px;
      font-weight: 500;
      border: none;
      cursor: pointer;
      transition: all 0.3s ease;
      position: relative;
      overflow: hidden;

      &::before {
        content: '';
        position: absolute;
        top: 0;
        left: -100%;
        width: 100%;
        height: 100%;
        background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
        transition: all 0.6s ease;
      }

      &:hover {
        transform: translateY(-2px);
        box-shadow: 0 5px 15px rgba($primary-color, 0.3);

        &::before {
          left: 100%;
        }
      }

      &:active {
        transform: translateY(1px);
        box-shadow: 0 2px 5px rgba($primary-color, 0.2);
      }

      &.loading {
        opacity: 0.8;
        cursor: not-allowed;
      }
    }

    .auth-links {
      display: flex;
      justify-content: space-between;
      margin-top: 20px;

      text {
        color: $neutral-700;
        font-size: 13px;
        cursor: pointer;
        transition: color 0.3s ease;

        &:hover {
          color: $primary-color;
        }
      }
    }
  }
}

// 添加一些全局动画效果
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

.fade-in {
  animation: fadeIn 0.5s ease forwards;
}

// 为不同元素设置不同的动画延迟
.login-card {
  animation: fadeIn 0.6s ease forwards;
}

.card-header {
  animation: fadeIn 0.5s ease 0.1s forwards;
  opacity: 0;
}

.card-body > * {
  animation: fadeIn 0.5s ease forwards;
  opacity: 0;
}

.card-body > .input-group:nth-child(1) {
  animation-delay: 0.2s;
}

.card-body > .input-group:nth-child(2) {
  animation-delay: 0.3s;
}

.card-body > .remember-me {
  animation-delay: 0.4s;
}

.card-body > .login-button {
  animation-delay: 0.5s;
}

.card-body > .auth-links {
  animation-delay: 0.6s;
}